<template>
    <div class="twoHandsRecommend">
        <div class="reco-box">
            <div class="reco-head">
                <div class="reco-h-l">
                    <div class="reco-h-uh">
                      <img src="../../../../static/img/uhead.jpg" alt="">
                      <img src="../../../../static/img/vip111.png" alt="">
                    </div>
                    <div class="reco-h-un"><span>Anner</span><span>学习使我快乐&nbsp;|&nbsp;10分钟前</span></div>
                </div>
                <p>￥98.6</p>
            </div>
            <div class="reco-shopName">
              <p>全新毛呢大衣春秋季</p>
              <p>立即抢购</p>
            </div>
            <div class="reco-shopImg">
              <img src="../../../../static/img/es1.png" alt=""><img src="../../../../static/img/es2.png" alt=""><img src="../../../../static/img/es3.png" alt="">
            </div>
            <div class="reco-dz">
                <div class="reco-dz-box">
                  <img src="../../../../static/img/dingwei424.png" alt="" style="height: .23rem">
                  <p>西安财经</p>
                </div>
                <div class="reco-dz-box">
                  <img src="../../../../static/img/tz2.png" alt="">
                  <p>85</p>
                </div>
                <div class="reco-dz-box">
                  <img src="../../../../static/img/tz3.png" alt="">
                  <p>30</p>
                </div>
                <div class="reco-dz-box">
                  <img src="../../../../static/img/tz4.png" alt="">
                  <p>98</p>
                </div>
            </div>
        </div>
        <div class="reco-box">
            <div class="reco-head">
                <div class="reco-h-l">
                    <div class="reco-h-uh">
                      <img src="../../../../static/img/uhead.jpg" alt="">
                      <img src="../../../../static/img/vip111.png" alt="">
                    </div>
                    <div class="reco-h-un"><span>Anner</span><span>学习使我快乐&nbsp;|&nbsp;10分钟前</span></div>
                </div>
                <p>￥98.6</p>
            </div>
            <div class="reco-shopName">
              <p>全新毛呢大衣春秋季</p>
              <p>立即抢购</p>
            </div>
            <div class="reco-shopImg">
              <img src="../../../../static/img/es1.png" alt=""><img src="../../../../static/img/es2.png" alt=""><img src="../../../../static/img/es3.png" alt="">
            </div>
            <div class="reco-dz">
                <div class="reco-dz-box">
                  <img src="../../../../static/img/dingwei424.png" alt="" style="height: .23rem">
                  <p>西安财经</p>
                </div>
                <div class="reco-dz-box">
                  <img src="../../../../static/img/tz2.png" alt="">
                  <p>85</p>
                </div>
                <div class="reco-dz-box">
                  <img src="../../../../static/img/tz4.png" alt="">
                  <p>98</p>
                </div>
            </div>
        </div>
        <div class="reco-box">
            <div class="reco-head">
                <div class="reco-h-l">
                    <div class="reco-h-uh">
                      <img src="../../../../static/img/uhead.jpg" alt="">
                      <img src="../../../../static/img/vip111.png" alt="">
                    </div>
                    <div class="reco-h-un"><span>Anner</span><span>学习使我快乐&nbsp;|&nbsp;10分钟前</span></div>
                </div>
                <p>￥98.6</p>
            </div>
            <div class="reco-shopName">
              <p>全新毛呢大衣春秋季</p>
              <p>立即抢购</p>
            </div>
            <div class="reco-shopImg">
              <img src="../../../../static/img/es4.png" alt=""><img src="../../../../static/img/es5.png" alt=""><img src="../../../../static/img/es6.png" alt="">
            </div>
            <div class="reco-dz">
                <div class="reco-dz-box">
                  <img src="../../../../static/img/dingwei424.png" alt="" style="height: .23rem">
                  <p>西安财经</p>
                </div>
                <div class="reco-dz-box">
                  <img src="../../../../static/img/tz2.png" alt="">
                  <p>85</p>
                </div>
                <div class="reco-dz-box">
                  <img src="../../../../static/img/tz4.png" alt="">
                  <p>98</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "twoHandsRecommend"
    }
</script>

<style scoped>
  .twoHandsRecommend{
    width: 100%;
    background-color:#F5F5F5;
  }
  .reco-box {
    background-color: #FFFFFF;
    margin-bottom: .1rem;
    box-sizing: border-box;
    padding: .15rem;
  }
  .reco-head {
    width: 100%;
    height: .32rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: .1rem;
  }
  .reco-h-l {
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .reco-head>p {
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF0101;
    line-height: .18rem;
    padding-right: .1rem;
  }
  .reco-h-uh {
    width:.32rem;
    height:.32rem;
    font-size: 0;
    position: relative;
    margin-right: .15rem;
  }
  .reco-h-un {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .reco-h-un>span:nth-child(1) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #333333;
  }
  .reco-h-un>span:nth-child(2) {
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #999999;
  }
  .reco-h-uh>img:nth-child(1) {
    width:.32rem;
    height:.32rem;
    border-radius:.04rem;
  }
  .reco-h-uh>img:nth-child(2) {
    width: .15rem;
    height: .15rem;
    position: absolute;
    bottom: -.02rem;
    right: -.05rem;
  }
  .reco-shopName {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
  }
  .reco-shopName>p:nth-child(1) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .reco-shopName>p:nth-child(2) {
    width:.77rem;
    height:.25rem;
    background:rgba(255,29,29,1);
    border-radius:.13rem;
    color: #FFFFFF;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    text-align: center;
    line-height: .25rem;
  }
  .reco-shopImg {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
  }
  .reco-shopImg>img {
    width:1.12rem;
    height:1.12rem;
    border-radius:.04rem;
    margin-bottom: .05rem;
  }
  .reco-dz {
    width: 100%;
    height: .3rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .reco-dz-box {
    display: flex;
    flex-flow: row;
    align-items: center;
    width: .5rem;
    justify-content: flex-end;
  }
  .reco-dz-box:nth-child(1) {
    width: 35%;
    justify-content: flex-start;
  }
  .reco-dz-box:nth-child(1)>p {
    width: 100%;
    text-align: left;
  }
  .reco-dz-box>p {
    text-align: center;
    width: .3rem;
    font-size:.12rem;
    font-family:SourceHanSansCN;
    font-weight:400;
    color: #999999;
  }
  .reco-dz-box>img {
    width: .18rem;
    height: .18rem;
    margin-right: .05rem;
  }
</style>
